
function useBlockDrag(focusData, lastSelectBlock) {

    let dragState = {
        startX: 0,
        startY: 0,
        startPos: []
    }
    //鼠标选中后按下鼠标触发鼠标按下事件mousedown，首先记录当前鼠标位置 startX、 startY，以及当前页面元素的位置startPos
    //监听鼠标移动事件mousemove和鼠标抬起事件mouseup
    const mousedown = (e) => {
        //拖拽的最后的元素
        const { width: BWidth, height: BHeight } = lastSelectBlock.value
        dragState = {
            startX: e.clientX,
            startY: e.clientY,
            startLeft: lastSelectBlock.value.left,
            startTop: lastSelectBlock.value.top,
            startPos: focusData.value.focus.map(({ top, left }) => ({ top, left })),
            lines: (() => {
                const { unfocuesed } = focusData.value;
                let lines = { x: [], y: [] }//计算横线位置用y，x是纵向位置
                unfocuesed.forEach((block) => {
                    const { top: ATop, left: ALeft, width: AWdith, height: AHeight } = block
                    lines.y.push({ showTop: ATop, top: ATop })
                    lines.y.push({ showTop: ATop, top: ATop - BHeight })
                    lines.y.push({ showTop: ATop + AHeight / 2, top: ATop + AHeight / 2 - BHeight / 2 })
                    lines.y.push({ showTop: ATop + AHeight, top: ATop + AHeight })
                    lines.y.push({ showTop: ATop + AHeight, top: ATop + AHeight - BHeight })
                    lines.x.push({ showLeft: ALeft, left: ALeft })
                    lines.x.push({ showLeft: ALeft + AWdith, left: ALeft + AWdith })
                    lines.x.push({ showLeft: ALeft + AWdith / 2, left: ALeft + AWdith / 2 - BWidth / 2 })
                    lines.x.push({ showLeft: ALeft + AWdith, left: ALeft + AWdith - BWidth })
                    lines.x.push({ showLeft: ALeft, left: ALeft - BWidth })
                })

            })()
        }
        document.addEventListener("mousemove", mousemove)
        document.addEventListener("mouseup", mouseup)
    }

    const mousemove = (e) => {
        //记录元素移动的实时位置
        const { clientX: moveX, clientY: moveY } = e
        //计算当前元素最新的top和left
        let left = moveX - dragState.startX + dragState.startLeft
        let top = moveY - dragState.startY + dragState.startTop


        //先计算横线
        
        //计算拖动元素移动时与初始位置的偏移量durX、durY
        let durX = moveX - dragState.startX
        let durY = moveY - dragState.startY
        //在选中元素中更改元素的数据源位置，根据
        //数据源中元素初始位置+偏移量=最终位置
        focusData.value.focus.forEach((block, index) => {
            block.top = dragState.startPos[index].top + durY
            block.left = dragState.startPos[index].left + durX
        })
    }

    //鼠标抬起后清除绑定事件
    const mouseup = (e) => {
        document.removeEventListener("mousemove", mousemove)
        document.removeEventListener("mouseup", mouseup)
    }
    return {
        mousedown
    }

}

export default useBlockDrag